<template>
  <dl>
    <dt class="fs40 pb20 fw-b">默认</dt>
    <dd class="pb20">
      <pre v-highlight="more"><code></code></pre>
    </dd>
    <dd class="pb20 d-f gap20">
      <t-more :before-load="beforeLoad" class="w100p">
        <div v-for="(item,index) in list" :key="index" class="list h60 d-f jc-c ai-c mb20">
          {{ index + 1 }}
        </div>
      </t-more>
    </dd>
  </dl>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TMoreBeforeLoadParams } from '@/base/types/components'

const list = ref<number[]>([])

const beforeLoad: TMoreBeforeLoadParams = (done) => {
  setTimeout(() => {
    if (list.value.length > 100) {
      done(false)
    } else {
      list.value.push(...Array.from(new Array(10)))
      done(true)
    }
  }, 1000)
}

setTimeout(() => {
  list.value.push(...Array.from(new Array(20)))
}, 1000)

const more = `<t-more :before-load="beforeLoad" class="w100p">
  <div v-for="(item,index) in list" :key="index" class="list h60 d-f jc-c ai-c mb20">
    {{ index + 1 }}
  </div>
</t-more>

import { ref } from 'vue'
import type { TMoreBeforeLoadParams } from '@/base/types/components'

const list = ref<number[]>([])

const beforeLoad: TMoreBeforeLoadParams = (done) => {
  setTimeout(() => {
    if (list.value.length > 100) {
      done(false)
    } else {
      list.value.push(...Array.from(new Array(10)))
      done(true)
    }
  }, 1000)
}

setTimeout(() => {
  list.value.push(...Array.from(new Array(20)))
}, 1000)`
</script>

<style scoped lang="scss">
.list {
  background-color: #2db7f5;
}
</style>
